<template>
  <view class="bg">
    <view class="main">
      <view class="list" v-for="list in branchList" :key="list.id">
        <view class="list__left">
          <view class="shop__name">{{list.goodName}}</view>
          <view class="createTime">{{list.createTime}}</view>
        </view>
        <text class="list__right">+{{list.rebateAmount }}</text>
      </view>
      <u-empty v-if="branchList.length == 0" text="暂无数据" :margin-top="500" mode="data"></u-empty>
      <u-loadmore margin-top="20" margin-bottom="20" v-if="branchList.length > 9" :status="loadingStatus"/>
    </view>
  </view>
</template>
<script>
import {getBranchList} from "../../api/shop";

export default {
  data() {
    return {
      branchList: [],
      loadingStatus: 'loadmore',
      query: {
        pageNum: 1,
        pageSize: 10
      },
      totalPage: undefined,


    }
  },
  onLoad() {
  },
  onShow(){
    this.query.pageNum = 1;
    this.getList(1);

  },
  methods: {
    //type 1首次加载 2分页数据
    getList(type) {
      this.loadingStatus = "loading"
      getBranchList(this.query).then(res => {
        if (type == 1) {
          this.branchList = res.rows;
        } else {
          this.branchList.push.apply(this.branchList, res.rows)
        }
        this.totalPage = Math.ceil(res.total / this.query.pageSize)
        if (this.query.pageNum < this.totalPage) {
          this.loadingStatus = "loadmore"
        }
        if (this.query.pageNum >= this.totalPage) {
          this.loadingStatus = "nomore"
        }
      })
    }
  },
  onReachBottom() {
    if (this.query.pageNum <= this.totalPage) {
      this.query.pageNum += 1;
      this.getList(2)
    }
  }
}
</script>

<style lang="scss" scoped>
.bg{
  width: 100vw;
  height: 100vh;
  background: #F5F5F5;
  overflow: hidden;
}
.main {
  width: 90%;
  margin: 30rpx auto;
  .list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 20rpx 40rpx;
    border-radius: 10rpx;
    .shop__name {
      font-size: 34rpx;
      font-weight: bold;
    }
    .createTime {
      color: #AEB3C0;
      margin-top: 10rpx;
    }
    .list__right{
      font-size: 40rpx;
      color: #D43F3D;
    }
  }
}

</style>
